<template>
  <div class="con">
    <div class="header">
      <van-icon name="scan" class="ewm" style="background:#fff" />
      <input type="text" value="搜索货号/关键字" />
      <van-icon name="chat-o" class="msg" style="background:#fff" />
      <van-icon name="search" class="search" />
    </div>
    <div class="main">
      <nav>
        <van-sidebar v-model="activeKey" class="list" @change="spec">
          <van-sidebar-item v-for="(items,i) in proname" :key="i" :title="items.classname" />
        </van-sidebar>
      </nav>
      <div class="prolist">
         <div class="box1" v-for="(item,i) in productname" :key="i">
      <van-cell
        :title="item.kindname"
        is-link
        :to="{name:'detail',query:{classid:item.classid,kindid:item.kindid,title:item.kindname}}"
      />
      <div class="product">
        <figure
          v-for="(item1,i) in productname[i].types"
          :key="i"
          @click="detail1(item.classid,item.kindid,item1.typeid,item1.typename)"
        >
          <img src="../assets/pic1.jpg" alt />

          <figcaption>
            <p>{{item1.typename}}</p>
          </figcaption>
        </figure>
      </div>
    </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/getproductlist";
export default {
  name: "Sort",
  data() {
    return {
      activeKey: 0,
      proname: [],
      productname: []
    };
  },
  methods: {
    spec(i) {
      api.getkind({ classid: i + 1 }).then(data => {
        this.productname = data.data.data;
      });
    },
    detail(classid, kindid) {
      this.$router.push("/detail/" + classid + kindid);
    },
    detail1(classid, kindid, typeid, title) {
      this.$router.push({
        path: "/detail1",
        query: {
          classid: classid,
          kindid: kindid,
          typeid: typeid,
          title: title
        }
      });
    }
  },
  mounted() {
    api.getclass({}).then(data => {
      this.proname = data.data.data;
    });
    api.getkind({ classid: 1 }).then(data => {
      this.productname = data.data.data;
    });
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.con {
  height: 100%;
  background: white;
}
.header {
  padding: 0 12px;
  justify-content: space-between;
  background: #fff;
  height: 46px;
  display: flex;
  align-items: center;
  position: relative;
}
.header input {
  width: 260px;
  height: 30px;
  background: #f1f1f3;
  border: 0;
  font-size: 12px;
  font-weight: 400;
  color: #7f7f7f;
  border-radius: 5px;
  padding-left: 20px;
}
.ewm,
.msg {
  font-size: 22px;
  vertical-align: middle;
  color: #7f7f7f;
}
.ewm {
  margin-right: -5px;
}
.search {
  position: absolute;
  left: 300px;
  font-size: 18px;
  color: #7f7f7f;
}

.main {
  flex: 1;
  overflow: auto;
  display: flex;
}
nav {
  width: 100px;
  overflow: auto;
}
.van-sidebar-item {
  background: #f5f5f5;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
  border-top: 1px solid white;
}
.van-sidebar-item--select {
  background: white;
  color: #e02c11;
}
.prolist {
  width: 310px;
  overflow: auto;
}

.van-sidebar-item{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
}


.box1 {
  margin: 0 15px;
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid #f3f3f3;
}
.product{
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}
.van-sidebar-item__text{
  font-size: 16px!important;
}
.van-cell__title{
  margin-left: 5px;

}
.product figure {
  margin-left: 26px;
  margin-right: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.product img {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid #3e6793;
  border-radius: 50%;
  background: palegreen;
}
.van-cell:not(:last-child)::after {
  border-bottom: 0;
}
.van-cell {
  padding: 0;
  line-height: 45px;
  height: 48px;
}
.van-icon-arrow {
  padding: 0;
  line-height: 45px;
  height: 48px;
}
</style>